<template>
  <div ref="chartRef" class="chart" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
defineOptions({ name: 'AdminEcharts' });

const props = defineProps({ option: { type: Object, default: () => ({}) } });
const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    chartInstance.setOption(props.option || {});
  }
};

const handleResize = () => {
  if (chartInstance) chartInstance.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

watch(() => props.option, (val) => {
  if (chartInstance && val) chartInstance.setOption(val, true);
}, { deep: true });
</script>

<style scoped>
.chart { width: 100%; height: 100%; }
</style>


